<template>
  <div class="right-block3">
    <div class="display-flex">
      <div class="box1">
        <div class="data-title">
          设备报警
        </div>
      </div>
      <div class="box2 sm-title text-right">
        <span class="num color-red">{{ alarm }}</span>报警事件
        <span class="num color-yellow">{{ fault }}</span>设备故障
      </div>
    </div>
    <template v-if="dataList && dataList.length>0">
      <vue-seamless-scroll :data="dataList" class="seamless-warp" :class-option="classOption">
        <div class="patrol-list">
          <div v-for="(item,index) in dataList" :key="index" class="item">
            <div class="display-flex marginb-10">
              <div class="box2 title text-ellipsis">
                <span v-if="item.status===2" class="state state-error" /><span v-if="item.status===1" class="state state-waring" />{{ item.name }}
              </div>
              <div v-if="item.status===2" class="box1 text-right color-red">
                告警
              </div>
              <div v-if="item.status===1" class="box1 text-right color-yellow">
                故障
              </div>
            </div>
            <div class="display-flex">
              <div class="box3 desc text-ellipsis">
                {{ item.content }}
              </div>
              <div class="box1 text-right time">
                {{ item.time|timeAgo }}
              </div>
            </div>
          </div>
        <!-- <div class="item">
                <div class="display-flex marginb-10">
                    <div class="box3 title text-ellipsis">
                        <span class="state state-waring"></span>恩科机电设备02号焊机
                    </div>
                    <div class="box1 text-right color-yellow">
                        故障
                    </div>
                </div>
                <div class="display-flex">
                    <div class="box3 desc text-ellipsis">
                        一切正常。
                    </div>
                    <div class="box1 text-right time">
                        10分钟前
                    </div>
                </div>
            </div> -->
        </div>
      </vue-seamless-scroll>
    </template>
    <div v-else class="nodata">
      暂无数据
    </div>
  </div>
</template>

<script>
import vueSeamless from 'vue-seamless-scroll'
import { postHandle } from '@/api'
export default {
  name: 'EquipmentAlarm',
  components: {
    'vue-seamless-scroll': vueSeamless
  },
  data() {
    return {
      fault: 0,
      alarm: 0,
      dataList: [
        // { name: '01号恩科机电监控终端', picture: require('@/assets/img/t.jpg'), description: '未连接焊机', status: 780, date: '2020-06-16 11:00:00' },
        // { name: '02号恩科机电监控终端', picture: require('@/assets/img/t.jpg'), description: '未连接焊机', status: 980, date: '2020-06-16 11:00:00' },
        // { name: '03号恩科机电监控终端', picture: require('@/assets/img/t.jpg'), description: '未连接焊机', status: 780, date: '2020-06-16 11:00:00' }
      ]
    }
  },
  computed: {
    classOption() {
      return {
        singleHeight: 100,
        direction: 1,
        limitMoveNum: 1
      }
    }
  },
  created() {
    this.getData()
    this.equipmentFault()
    this.equipmentAlarm()
  },
  methods: {
    getData() {
      postHandle('/api/v1/welder-sbtx-second/equipment-alarm-comb/list', {
        d: {
          filters: [
            {
              field: 'projectId',
              operator: 'EQUALS',
              value: this.$route.query.id
            }
          ],
          page: {
            ps: 20
          },
          sorts: [{ field: 'time', isDesc: true }]
        }
      }).then(res => {
        this.dataList = res.result
      })
    },
    equipmentFault() {
      postHandle('/api/v1/welder-sbtx-second/equipment-alarm/count', {
        d: {
          filters: [
            {
              field: 'status',
              operator: 'EQUALS',
              value: 1
            }
          ]
        }
      }).then(res => {
        this.fault = res.result
      })
    },
    equipmentAlarm() {
      postHandle('/api/v1/welder-sbtx-second/equipment-alarm/count', {
        d: {
          filters: [
            {
              field: 'status',
              operator: 'EQUALS',
              value: 2
            }
          ]
        }
      }).then(res => {
        this.alarm = res.result
      })
    }
  }
}
</script>

<style scoped>
.seamless-warp {
        height: 200px;
        overflow: hidden;
    }
</style>
